<template>
  <view class="page" v-if="leaseInfo">
    <view class="show-panel">
      <view class="show-col">
        <text class="show-col-l">租赁周期</text>
        <view class="show-col-r">
          {{
            `${leaseInfo.feApartment.beginTime.split(" ")[0]} 到 ${leaseInfo.feApartment.endTime.split(" ")[0]}`
          }}
        </view>
      </view>
      <view class="show-col">
        <text class="show-col-l">免租周期</text>
        <view class="show-col-r" :style="{color:leaseInfo.feApartment.rentFreeBeginDate==''?'#999':''}">
          <text v-if="leaseInfo.feApartment.rentFreeBeginDate&&leaseInfo.feApartment.rentFreeEndDate">
            {{
              `${leaseInfo.feApartment.rentFreeBeginDate} 到 ${leaseInfo.feApartment.rentFreeEndDate}`
            }}
          </text>
          <text v-else></text>
        </view>
      </view>
      <view class="show-col">
        <text class="show-col-l">租赁模式</text>
        <view class="show-col-r" >
          {{leaseInfo.feApartment.leaseModel}}
        </view>
      </view>
      <view class="show-col">
        <text class="show-col-l">收费类型</text>
        <view class="show-col-r">
          <text>{{ leaseInfo.feApartment.feeModel ? leaseInfo.feApartment.feeModel : '请选择收费类型' }}</text>
        </view>
      </view>
      <template v-if="leaseInfo.feApartment.leaseModel=='按面积'">
        <view class="show-col">
          <text class="show-col-l">合同总面积 (m²)</text>
          <view class="show-col-r">
            <input v-model="leaseInfo.feApartment.contractArea" placeholder="请填写面积" type="number"
                   placeholder-class="placeholder"/>
          </view>
        </view>
        <view class="show-col">
          <text class="show-col-l">租金单价 (元)</text>
          <view class="show-col-r">
            <input v-model="leaseInfo.feApartment.areaPrice" placeholder="请填写价格" type="number"
                   placeholder-class="placeholder"/>
          </view>
        </view>
        <view class="show-col">
          <text class="show-col-l">物管费单价 (元)</text>
          <view class="show-col-r">
            <input v-model="leaseInfo.feApartment.propertyPrice" placeholder="请填写价格" type="number"
                   placeholder-class="placeholder"/>
          </view>
        </view>
        <view class="show-col">
          <text class="show-col-l">设施使用费单价 (元)</text>
          <view class="show-col-r">
            <input v-model="leaseInfo.feApartment.facilityPrice" placeholder="请填写价格" type="number"
                   placeholder-class="placeholder"/>
          </view>
        </view>
      </template>

      <view class="show-col">
        <text class="show-col-l">下期账单日期</text>
        <view class="show-col-r">
          <text >
            {{
              leaseInfo.feApartment.nextPropertyDate ||`请选择免租日期`
            }}
          </text>
        </view>
      </view>
    </view>


    <view style="display: flex;justify-content: space-between;align-items: center">
      <view class="info-tit">
        房源列表
      </view>
      <view class="r-unit">
        单位：元
      </view>
    </view>


    <view class="show-panel" style="border-radius: 12rpx 12rpx 0 0;margin-bottom: 0;">
      <view class="table-col table-tit">
        <view class="table-col-c" style="width: 38%">房源编号</view>
        <view class="table-col-c" style="width: 26%">租金/间</view>
        <view class="table-col-c" style="width: 18%">物管费</view>
        <view class="table-col-c" style="width: 18%">保证金</view>
      </view>

      <view class="table-col" v-for="(item,index) in leaseInfo.roomVOList" :key="index">
        <view class="table-col-c" style="width: 38%">{{ item.roomNum }}</view>
        <view class="table-col-c" style="width: 26%">
          <text>{{item.areaPrice}}</text>
        </view>
        <view class="table-col-c" style="width: 18%">
          <text>{{item.propertyFee}}</text>
        </view>
        <view class="table-col-c" style="width: 18%">
        <text>{{item.margin||0}}</text>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "leaseInfo",
  data(){
    return{
      leaseInfo:null
    }
  },
  onLoad({id}){
    this.apis.buildingApi.feApartmentInfo(id).then(res=>{
      console.log(res)
      this.leaseInfo=res.data
    })
  },
  methods:{

  }
}
</script>

<style scoped>

</style>
